<template>
  <div class="right">
    <p>热销</p>
    <div class="list" v-for="(item,index) in tankList" :key="index">
        <div class="listimg">
          <img :src="item.pic" alt="">
        </div>
        <div class="listright">
            <p>{{item.targetname}}</p>
            <p>{{item.smallname}}</p>
            <div class="rightbottom">
                <span>￥{{item.price}}</span>
                <div class="yuan">+</div>
            </div>
        </div>
    </div>
    <div class="bottom">
            <p>总价</p>
            <div class="count">去结算</div>
    </div>
  </div>
</template>
<script>
//导入图片
import image from '../assets/logo.png'
export default {
  data(){
    return {
      tankList:[
        {targetname:'挪威三文鱼刺身-薄片',pic:image,smallname:'取三文鱼中段，口感鲜甜',price:'45'},
        {targetname:'国产生蚝-刺身',pic:image,smallname:'每份一只广东湛江生蚝，肉质鲜美',price:'8'},
        {targetname:'挪威纯鲜三文鱼-厚片',pic:image,smallname:'顺丰包邮，一天直达',price:'54.4'},
        {targetname:'北极甜虾',pic:image,smallname:'每一只都是爆汁的口感',price:'22.4'},
      ]
    }
  }
}
</script>
<style>
   .right{
    width: 260px;
    height: 462px;
    /* background-color: forestgreen; */
    float: left;
    position: relative;
   }
   .right p{
    height: 25px;
    width: 100%;
   }
   .right .list{
    height: 80px;
    width: 100%;
    /* background-color: yellowgreen; */
    display: flex;
    border-bottom: 2px solid whitesmoke;
   }
   .right .list .listimg{
    text-align: center;
     height: 100%;
     width: 80px;
   }
   .right .list .listimg img{
    width: 70%;
   }
   .right .list .listright{
    height: 100%;
    width: 180px;
   }
   .listright p{
     width: 100%;
     height: 20px;
   }
   .listright p:nth-child(1){
    font-weight: 700;
   }
   .listright p:nth-child(2){
    font-size: 12px;
    color: #9f9c9c;
   }
   .listright .rightbottom{
    width: 100%;
    height: 40px;
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
    padding-top: 20px;
   }
   .listright .rightbottom span{
    color: red;
   }
   .listright .rightbottom .yuan{
    height: 12px;
    width: 12px;
    border-radius: 50%;
    text-align: center;
    line-height: 11px;
    color: white;
    background-color: rgb(37, 94, 216);
    margin-right: 15px;
    margin-top: 7px;
   }
   .bottom{
            height: 50px;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.632);
            display: flex;
            align-items: center;
            justify-content: space-around;
            position: absolute;
            bottom: 0;
        }
        .bottom p{
            font-size: 20px;
            font-weight: 700;
            color: wheat;
            margin: 0 20px;
        }
        .bottom .count{
            width: 100px;
            height: 30px;
            background-color: limegreen;
            color: white;
            line-height: 35px;
            text-align: center;
            font-size: 14px;
            margin-right: 30px;
        }
</style>